<template>
  <!-- 提现页面 -->

  <div class="box1">
    <Hand :left="true" :iconbool="false" title="提现" @back="fn"></Hand>

    <div class="Myassets">
      <img src="../../img/我的头像/未标题-1.png" alt="" />
      <p class="num1">{{ oladnum }}币</p>
      <p class="num2">今日兑率 10币 : 1人民币</p>
    </div>
    <!-- 提现申请 -->
    <div class="appyforw">
      <h3>提现申请</h3>
      <div class="anniu">
        <span>提现金额：</span
        ><input type="number" placeholder="请输入提现金额" v-model="numvalue" />
      </div>

      <div class="anniu1">
        <span> 到账时间：</span
        ><input
          type="text"
          placeholder="请选择到账时间"
          @click="clpopup"
          v-model="listvalue"
        />
        <van-popup
          v-model:show="show"
          position="bottom"
          :style="{ height: '30%' }"
          round
        >
          <p class="duck">请选择到账时间</p>
          <ul>
            <li
              v-for="(item, index) in listarr"
              :key="index"
              @click="but1(item)"
            >
              {{ item.name }}<span class="servicesty">{{ item.service }}</span>
            </li>
          </ul>
        </van-popup>
      </div>
      <p class="tle">
        前资产余额低于100币不可提现，提现手续费按照到账 周期收取，每天限3次
      </p>
    </div>
    <button class="btncls" @click="btnsbm">提现</button>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Hand from "../../components/Hand.vue";
import { useRouter } from "vue-router";
import { showSuccessToast, showFailToast } from "vant";
const oladnum = ref(4056.89);
const router = useRouter();
const numvalue = ref();
const show = ref(false);
const listvalue = ref("");
const listarr = ref([
  { name: "1日到账", service: "5%手续费" },
  { name: "2日到账", service: "4%手续费" },
  { name: "3日到账", service: "3%手续费" },
  { name: "5日到账", service: "0%手续费" },
]);

function fn() {
  router.back();
}

const but1 = (item) => {
  console.log(item.name);
  listvalue.value = item.name + item.service;
  show.value = false;
};

const clpopup = () => {
  show.value = true;
};

const btnsbm = () => {
  if (numvalue.value > oladnum.value/10 ) {
    showFailToast("当前资产余额不足 " + numvalue.value);
  } else if (numvalue.value === 0 || numvalue.value === undefined) {
    showFailToast("请输入金额 ");
  } else if (listvalue.value === "") {
    showFailToast("信息未完善 ");
  } else {
    oladnum.value=oladnum.value-numvalue.value*10
    showSuccessToast("提现成功 ")};
};
</script>

<style lang="less" scoped>
.box1 {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: #ecfdfa;
  .btncls {
    width: 90vw;
    height: 5vh;
    margin-left: 5vw;
    background-color: #5bead8;
    border: 1px solid #5bead8;
    border-radius: 4vw;
    color: white;
    font-size: 2.667vw;
  }
  .Myassets {
    margin: 4vw;
    background-color: white;
    border-radius: 2vw;
    width: 90vw;
    height: 50vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    img {
      width: 30vw;
      height: 30vw;
    }
    .num1 {
      color: #ed8c9f;
      font-size: 6.667vw;
    }
    .num2 {
      color: #ccc;
      font-size: 2.667vw;
      padding-top: 2vw;
    }
  }
  .appyforw {
    margin: 4vw;
    background-color: white;
    border-radius: 2vw;
    width: 90vw;
    height: 85vw;
    .tle {
      color: #ccc;
      font-size: 1.867vw;
      margin-left: 5vw;
    }
    h3 {
      padding-top: 5vw;
      margin-left: 5vw;
      margin-bottom: 5vw;
      font-weight: bolder;
    }
    .anniu {
      span {
        padding-top: 5vw;
        margin-left: 5vw;
        margin-bottom: 5vw;
        font-weight: bold;
        font-size: 3.867vw;
      }
      input {
        color: #ccc !important;
        font-size: 3.867vw;
      }
    }
    .anniu1 {
      margin-top: 5vw;
      margin-bottom: 5vw;
      span {
        margin-left: 5vw;
        font-weight: bold;
        font-size: 3.867vw;
      }
      input {
        color: #ccc !important;
        font-size: 3.867vw;
      }
      .duck {
        text-align: center;
        color: #ed8c9f;
        font-size: 5vw;
      }
      ul {
        text-align: center;
        li {
          margin-top: 4vw;
          margin-bottom: 4vw;
          .servicesty {
            color: #ccc;
            font-size: 1.867vw;
            margin-left: 5vw;
          }
        }
      }
    }
  }
}
</style>
